<template>
  <div class="hAdmin-dialog">
    <el-dialog
      v-model="formData.show"
      :close-on-click-modal="false"
      :title="dialogTitle"
      width="40%"
      @close="closeDialog"
    >
      <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formData"
        :rules="rules"
        class="box"
      >
        <el-form-item
          class="box-item"
          label="类型"
          prop="pid"
          :error="customeErr.type"
        >
          <el-select
            v-model="formData.type"
            placeholder="Select"
            size="default"
          >
            <el-option
              v-for="(item, index) in moduleTyps"
              :key="item.value + '_' + index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="box-item"
          label="菜单类型"
          prop="pid"
          :error="customeErr.pid"
        >
          <el-cascader
            v-model="formData.pid"
            :options="pOpts"
            :props="mulProps"
            :show-all-levels="false"
          />
        </el-form-item>
        <el-form-item
          class="box-item"
          label="菜单名称"
          prop="metaItem.title"
          :error="customeErr.title"
        >
          <el-input v-model="formData.metaItem.title" />
        </el-form-item>
        <el-form-item
          class="box-item"
          label="菜单图标"
          prop="metaItem.icon"
          :error="customeErr.icon"
        >
          <el-select
            v-model="formData.metaItem.icon"
            placeholder="请选择图标"
            size="default"
          >
            <el-option
              v-for="(item, index) in getIcons()"
              :key="item.value + '_' + index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="box-item"
          label="组件名称"
          prop="name"
          :error="customeErr.name"
        >
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item
          class="box-item"
          label="组件路径"
          prop="component"
          :error="customeErr.component"
        >
          <el-input v-model="formData.component" />
        </el-form-item>
        <el-form-item
          class="box-item"
          label="访问路径"
          prop="path"
          :error="customeErr.path"
        >
          <el-input v-model="formData.path" placeholder="请输入访问路径" />
        </el-form-item>
        <el-form-item
          class="box-item"
          label="重定向地址"
          prop="redirect"
          :error="customeErr.redirect"
        >
          <el-input
            v-model="formData.redirect"
            placeholder="重定向地址可以为空"
          />
        </el-form-item>
        <template v-if="formData.type == 2">
          <el-form-item
            class="box-item"
            label="路由缓存"
            prop="metaItem.keepAlive"
            :error="customeErr.keepAlive"
          >
            <el-switch
              v-model="formData.metaItem.keepAlive"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
          </el-form-item>
          <el-form-item
            class="box-item"
            label="内嵌地址(iframe)"
            prop="frameSrc"
            :error="customeErr.frameSrc"
          >
            <el-input
              v-model="formData.metaItem.frameSrc"
              placeholder="非必要不填写"
            />
          </el-form-item>
          <el-form-item
            class="box-item"
            label="功能权限"
            prop="permission"
            :error="customeErr.permission"
          >
            <el-input v-model="formData.permission" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div style="text-align: center">
          <el-button
            :disabled="disableBtn"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            {{ btnTxt }}
          </el-button>
          <el-button @click="closeDialog"> 取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue";
import {
  defaultErrMsg,
  defaultModuleOpts,
  defaultModuleTypes,
  ErrMsg,
  formRules,
  getRowForm,
  rowForm
} from "./page";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { getIcons } from "@/utils/icons";

// ==== http请求 ============
import { SaveMenu } from "@/api/system/menu";
// =========================

const mulProps = {
  checkStrictly: true
};
// 禁用按钮
const disableBtn = ref(false);
// 模块类型
const moduleTyps = reactive(defaultModuleTypes);
// 顶级组件
const pOpts = reactive(defaultModuleOpts);
const ruleFormRef = ref<FormInstance>();
const formData: rowForm = reactive<rowForm>(getRowForm());
const customeErr: ErrMsg = reactive<ErrMsg>(defaultErrMsg);
// 表单验证
const rules = reactive<FormRules>(formRules);

// 设置props
interface Props {
  title?: string;
  btnTxt?: string;
  reqForm: rowForm;
}

const props = withDefaults(defineProps<Props>(), {
  title: "添加",
  btnTxt: "保存",
  reqForm: () => {
    return { show: false };
  }
});

const dialogTitle = computed(() => {
  let title = props.title;
  for (let i = 0; i < defaultModuleTypes.length; i++) {
    if (defaultModuleTypes[i].value === formData.type) {
      title += defaultModuleTypes[i].label;
    }
  }
  return title;
});

// 添加监听器
watch(props.reqForm, async newValue => {
  Object.assign(formData, newValue);
});

// 注册事件
const emit = defineEmits(["close"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  disableBtn.value = true;
  if (!formEl) {
    disableBtn.value = false;
    ElMessage.error("无法提交数据,表单验证实例为空");
    return;
  }
  // 表单验证
  const formValidator = await formEl.validate((valid, fields) => {
    if (!valid) {
      disableBtn.value = false;
      console.log("验证字段", valid);
      console.log("验证字段信息", fields);
      return false;
    }
    return true;
  });
  const resp = formValidator ? await SaveMenu(formData) : false;
  disableBtn.value = false;
  if (resp.code && resp.code === 2000) {
    ElMessage.success(resp.sub_msg);
    closeDialog();
    return;
  }
};

const closeDialog = () => {
  Object.assign(formData, getRowForm());
  disableBtn.value = false;
  emit("close"); // 关闭弹窗页
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  margin-right: 0;
  border-bottom: 1px solid #ddddde;
}

.box {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box-item {
  flex: 0 1 48%;
  margin-bottom: 15px;
}
</style>
